﻿@model Tarasca.Models.CuentasModel
<script type="text/javascript">
    var subMenuOpcionSeleccionada;

    $(document).ready(function () {
        $("#contenidoCuentasAuxiliar").hide();
        ocultarVolverUltimoMovimiento();
        ocultarCargandoCuentas();
        EventBinder($("#verCategorias"), "click", mostrarCategorias);
        EventBinder($("#verMovimientos"), "click", mostrarMovimientos);
        EventBinder($("#verReportes"), "click", mostrarReportes);
        EventBinder($("#filtroMes"), "change", validarAccion);
        EventBinder($("#filtroAno"), "change", validarAccion);
        EventBinder($("#volverUltimoMovimiento"), "click", volverUltimoMovimiento);

        var mesDefecto = '@Html.Raw(DateTime.Now.Month.ToString())';
        $("#filtroMes").val(mesDefecto);

        var anoDefecto = '@Html.Raw(DateTime.Now.Year.ToString())';
        $("#filtroAno").val(anoDefecto);
        mostrarMovimientos();
    });

    function validarAccion() {
        if (subMenuOpcionSeleccionada == "Movimientos")
            mostrarMovimientos();
        else if (subMenuOpcionSeleccionada == "Reportes")
            mostrarReportes();
    }

    function cargarDataEnContenedor(usarContenedorAuxiliar, data) {
        if (usarContenedorAuxiliar) {
            $("#contenidoCuentasAuxiliar").show();
            $("#contenidoCuentasGeneral").hide();
            $("#contenidoCuentasAuxiliar").html(data);
        }
        else {
            $("#contenidoCuentasAuxiliar").hide();
            $("#contenidoCuentasGeneral").show();
            $("#contenidoCuentasGeneral").html(data);
        }
    }

    function ocultarVolverUltimoMovimiento() {
        $("#volverUltimoMovimiento").hide();
    }

    function mostrarVolverUltimoMovimiento() {
        $("#volverUltimoMovimiento").show();
    }

    function volverUltimoMovimiento() {
        $("#contenidoCuentasGeneral").hide();
        $("#contenidoCuentasAuxiliar").show();
        ocultarVolverUltimoMovimiento();
        refrescarCategorias();
    }

    function mostrarCategorias() {
        mostrarCargandoCuentas();

        $.ajax({
            url: '@Url.Content("~/Categorias/")',
            data: { idCuenta: '@Html.Raw(Model.IdCuenta.ToString())' },
            success: function (data) {
                cargarDataEnContenedor(false, data);
                subMenuOpcionSeleccionada = "Categorías";
                $(".comandoCuenta label").removeClass("comandoSeleccionado");
                $("#verCategorias label").addClass("comandoSeleccionado");
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Cargando categorías");
            }
        });
    }

    function mostrarMovimientos() {
        var mes = $("#filtroMes").val();
        var ano = $("#filtroAno").val();
        mostrarCargandoCuentas();

        $.ajax({
            url: '@Url.Content("~/Movimientos/")',
            data: { idCuenta: '@Html.Raw(Model.IdCuenta.ToString())', mes: mes, ano: ano },
            success: function (data) {
                cargarDataEnContenedor(false, data);
                subMenuOpcionSeleccionada = "Movimientos";
                $(".comandoCuenta label").removeClass("comandoSeleccionado");
                $("#verMovimientos label").addClass("comandoSeleccionado");
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Cargando movimientos");
            }
        });
    }

    function mostrarReportes() {
        var mes = $("#filtroMes").val();
        var ano = $("#filtroAno").val();
        mostrarCargandoCuentas();

        $.ajax({
            url: '@Url.Content("~/Reportes/")',
            data: { idCuenta: '@Html.Raw(Model.IdCuenta.ToString())', mes: mes, ano: ano },
            success: function (data) {
                cargarDataEnContenedor(false, data);
                subMenuOpcionSeleccionada = "Reportes";
                $(".comandoCuenta label").removeClass("comandoSeleccionado");
                $("#verReportes label").addClass("comandoSeleccionado");
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Cargando Reportes");
            }
        });
    }

    function mostrarCargandoCuentas() {
        $(".cargandoCuentas").show();
    }

    function ocultarCargandoCuentas() {
        $(".cargandoCuentas").hide();
    }

    function nuevoMovimiento(e) {
        mostrarCargandoCuentas();

        $.ajax({
            url: '@Url.Content("~/Movimientos/Nuevo")',
            data: { idCuenta: '@Html.Raw(Model.IdCuenta.ToString())' },
            success: function (data) {
                cargarDataEnContenedor(true, data);
                subMenuOpcionSeleccionada = "NuevoMovimiento";
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Nuevo Movimiento");
            }
        });
    }

    function editarMovimiento(e) {
        mostrarCargandoCuentas();
        var idMovimiento = $(e.currentTarget).attr("idMovimiento");

        $.ajax({
            url: '@Url.Content("~/Movimientos/Editar/")',
            data: { idMovimiento: idMovimiento },
            success: function (data) {
                cargarDataEnContenedor(true, data);
                subMenuOpcionSeleccionada = "EditarMovimiento";
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Editar Movimiento");
            }
        });
    }

    function nuevaCategoria() {
        mostrarCargandoCuentas();

        $.ajax({
            url: '@Url.Content("~/Categorias/Nueva")',
            data: { idCuenta: '@Html.Raw(Model.IdCuenta.ToString())' },
            success: function (data) {
                cargarDataEnContenedor(false, data);
                subMenuOpcionSeleccionada = "CargandoNuevaCategoria";
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Cargar Categoría");
            }
        });
    }

    function editarCategoria(e) {
        mostrarCargandoCuentas();
        var idCategoria = $(e.currentTarget).attr("idCategoria");

        $.ajax({
            url: '@Url.Content("~/Categorias/Editar/")',
            data: { idCategoria: idCategoria },
            success: function (data) {
                cargarDataEnContenedor(false, data);
                subMenuOpcionSeleccionada = "EditandoCategoria";
                ocultarCargandoCuentas();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Editar Categoría");
            }
        });
    }
</script>
<div class="row">
    <form class="form-inline">
        <div class="contenedorFiltros">
            <div class="col-md-12">
                <div class="form-group ">
                    <label>Mes:</label>
                    <select id="filtroMes" class="form-control">
                        <option value="1">Enero</option>
                        <option value="2">Febrero</option>
                        <option value="3">Marzo</option>
                        <option value="4">Abril</option>
                        <option value="5">Mayo</option>
                        <option value="6">Junio</option>
                        <option value="7">Julio</option>
                        <option value="8">Agosto</option>
                        <option value="9">Septiembre</option>
                        <option value="10">Octubre</option>
                        <option value="11">Noviembre</option>
                        <option value="12">Diciembre</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Año:</label>
                    <select id="filtroAno" class="form-control">
                        @for (int i = DateTime.Now.Year; i >= (DateTime.Now.Year - 50); i--)
                        {
                            <option>@i.ToString()</option>
                        }
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="row comandosCuentas">
    <div id="verMovimientos" class="form-group col-md-4 comandoCuenta">
        <img src="~/Contenido/Imagenes/cash-128.png" />
        <label>Ver Movimientos</label>
    </div>
    <div id="verReportes" class="form-group col-md-4 comandoCuenta">
        <img src="~/Contenido/Imagenes/high_rate-128.png" />
        <label>Ver Reportes</label>
    </div>
    <div id="verCategorias" class="form-group col-md-4 comandoCuenta">
        <img id="comandoImagenCategorias" src="~/Contenido/Imagenes/Categories-128.png" />
        <label id="comandLabelCategorias">Ver Categorias</label>
    </div>
</div>
<div class="row">
    <div class="form-group col-md-3">
        <button id="volverUltimoMovimiento" class="btn btn-warning">[!] Volver a Carga de Movimiento</button>
    </div>
</div>
<div class="row contenedorContenidoCuentas">
    <div class="cargandoCuentas">
        <img src="~/Contenido/Imagenes/loading2.gif" alt="Cargando deita" />
    </div>
    <div id="contenidoCuentasGeneral" class="col-md-12 contenidoCuentas">
        
    </div>
    <div id="contenidoCuentasAuxiliar" class="col-md-12 contenidoCuentas">

    </div>
</div>
